<template>
    <div>
        <!-- 对数据操作  -->
        <div class="tool-rows">
            <el-input v-model="userName" placeholder="请输入用户名" class="table-input" suffix-icon="el-icon-user"></el-input>
            <el-input v-model="nickName" placeholder="请输入昵称" class="table-input" suffix-icon="el-icon-s-custom"></el-input>
            <el-input v-model="phone" placeholder="请输入电话" class="table-input" suffix-icon="el-icon-phone"></el-input>
            <el-button type="success" icon="el-icon-search" @click="load">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
        <div class="tool-rows">
            <el-button type="success" icon="el-icon-plus" @click="handleInsert">新增</el-button>
            <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="handleBatchDelete"
                    title="确定删除选中用户吗?">
                <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin: 0 10px">批量删除</el-button>
            </el-popconfirm>
            <el-upload
                    style="display: inline-block"
                    :show-file-list="false"
                    :on-success="handleImport"
                    action="http://localhost:18080/user/import"
                    accept="xlsx">
                <el-button type="primary" icon="el-icon-download">导入</el-button>
            </el-upload>
            <el-button type="primary" icon="el-icon-upload2" @click="handleExport" style="margin-left: 10px;">导出</el-button>
        </div>

        <!-- 表单区域  -->
        <el-table :data="tableData" header-cell-class-name="table-header" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="50">
            </el-table-column>
            <el-table-column prop="userName" label="用户名" width="120">
            </el-table-column>
            <el-table-column prop="nickName" label="昵称">
            </el-table-column>
            <el-table-column prop="role" label="角色">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="phone" label="电话">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm
                            confirm-button-text='确认'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="handleDelete(scope.row.id)"
                            title="确定删除该用户吗?">
                        <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left: 6px">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条  -->
        <div class="tool-rows">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!-- 用户信息编辑   -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" custom-class="edit-dialog">
            <el-form :model="userForm">
                <el-form-item label="用户名" label-width="80px">
                    <el-input v-model="userForm.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" label-width="80px">
                    <el-input v-model="userForm.nickName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色" label-width="80px">
                    <el-select v-model="userForm.role" style="width: 100%;" placeholder="--请选择--">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.identifier">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" label-width="80px">
                    <el-input v-model="userForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="80px">
                    <el-input v-model="userForm.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { serverIp, serverPort } from "../../public/config";

    export default {
        name: "User",
        data () {
            return {
                // 分页控件
                pageNumber: 1,
                pageSize: 5,
                total: 0,
                userName: '',
                nickName: '',
                phone: '',
                // 表格数据
                tableData: [],
                // 用户编辑
                dialogFormVisible: false,
                userForm: {},
                multipleSelection: [],
                // 角色数据
                roles: []
            }
        },
        created () {
            this.load()
        },
        methods: {
            // 分页加载
            load () {
                this.request.get('/user/page', {
                    params: {
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize,
                        userName: this.userName,
                        nickName: this.nickName,
                        phone: this.phone
                    }
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
                this.request.get('/role').then(res => {
                    this.roles = res.data
                })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNumber) {
                this.pageNumber = pageNumber
                this.load()
            },
            reset () {
                this.userName = ''
                this.nickName = ''
                this.phone = ''
                this.load()
            },
            // 新增
            handleInsert () {
                this.userForm = {}
                this.dialogFormVisible = true
            },
            // 编辑
            handleEdit (row) {
                this.userForm = row
                this.dialogFormVisible = true
            },
            // 删除
            handleDelete (id) {
                this.request.delete('/user/' + id).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleBatchDelete () {
                let ids = this.multipleSelection.map(v => v.id)
                this.request.post('/user/del/batch', ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('批量删除成功!')
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            save () {
                this.request.post('/user', this.userForm).then(res => {
                    if (res.code === '200') {
                        this.$message.success('保存成功!')
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            handleExport () {
                window.open(`http://${serverIp}:${serverPort}/user/export`)
            },
            handleImport () {
                this.$message.success("导入成功")
                this.load()
            }
        }
    }
</script>

<style scoped>
    div.tool-rows {
        margin: 16px 0;
    }
    .table-input{
        display: inline-block;
        margin-right: 15px;
        width: 200px;
    }
    /deep/ .table-header {
        background-color: #E4E4E4 !important;
    }
    /deep/ .edit-dialog {
        border-radius: 12px !important;
    }
</style>